<template>
  <el-dialog
    :model-value="modelValue"
    class="task-view-dialog"
    width="1400px"
    align-center
    :close-on-click-modal="false"
    :before-close="handleClose"
    @update:model-value="(value: boolean) => emit('update:modelValue', value)"
  >
    <TaskDetail
      v-if="taskId"
      :task-id="taskId"
      :visible="modelValue"
      @update:visible="handleVisibleChange"
      @task-updated="handleTaskUpdated"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import TaskDetail from '@/views/tasks/components/TaskDetail.vue'
import type { Task } from '@/types/task'

interface Props {
  modelValue: boolean
  taskId?: string
}

withDefaults(defineProps<Props>(), {
  modelValue: false,
  taskId: ''
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'task-updated': [task: Task]
}>()

const handleClose = (done: () => void) => {
  emit('update:modelValue', false)
  done()
}

const handleVisibleChange = (value: boolean) => {
  emit('update:modelValue', value)
}

const handleTaskUpdated = (task: Task) => {
  emit('task-updated', task)
}
</script>

<style scoped>
.task-view-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
}
</style>

